190331-0401_TIL(프로젝트 보완, box-sizing 속성, box model, flex box)

3월 31일 (일)

• 오늘은 프로젝트에서 아직 부족한 점을 보완하기 위해서 오후 시간을 비워뒀다. 총 세 가지의 보완사항이 있었는데 첫번째는 to-do 입력 시 input 창 안이 공백이어도 입력이 되는 문제를 보완해야 하는 사항이었다. 이 문제는 간단하기 때문에 가장 먼저 처리하기로 했다. 조건문에 input 창 안이 공백이면 alert 창을 띄움으로써 해결하였다. 두번째 보완사항은 배경 이미지를 선택하여 변경 이후 다시 로드할 때 변경된 이미지 값이 저장되지 않는 사항이었다. 로컬스토리지에 저장하면 해결될 사항이었다. 우선 배경이미지를 저장할 함수를 하나 생성하여 .css() 메서드로 'background' 값을 가져오고 배경이미지를 클릭하여 선택할 시 함수를 호출하여 저장하게 하였다. 그리고 로드할 함수를 하나 더 생성하여 .css()매서드로 'background' 값을 가져오고 함수를 호출하여 로드하였다. 마지막은 클래스가 겹치는 현상으로 인하여 같은 위치에 포스트잇이 겹치는 현상을 해결하여야 했다. 클래스의 중복문제를 해결해보고자 했지만 잘 해결이 되지 않아서 아예 다른 방법을 고안하였다. 그것은 포스트잇이 하나 생성될 때마다 위치 값을 랜덤으로 주는 방식이다. 먼저 랜덤한 수를 생성하기 위하여 Math.random()매서드를 사용하였다. 그 다음 .find() 매서드와 .css() 매서드를 이용하여 포스트잇에 위치 값을 주었다. 그리고 나서 이 랜덤 한 위치 값을 로컬스토리지에 저장하여 랜덤한 위치를 가지는 포스트잇으로 문제를 보완하였다.
  주말에 골치 아픈 문제를 가지고 씨름하고 머리 아프고 힘들었지만 문제를 보완한 이후에 오는 뿌듯함이 그 모든 것을 상쇄시켰다. 보람찬 하루로 기억될 것 같다.

4월 1일 (월)

• 오늘은 김데레사 강사님의 첫 강의 시간이었다. 설렘 반 걱정 반으로 수업에 참여하였는데 정말 기초부터 탄탄하게 잘 가르쳐주셔서 많은 배움이 있었던 하루였다. 오늘 배운 정말 많은 내용 중에서도 가장 중요하다고 생각되는 box-sizing 속성, box model 그리고 flex model을 정리하도록 하겠다.

box-sizing 속성

• content-box는` 요소 박스에 지정된 모든 값을 더해 박스의 크기를 결정하는 방식. 예를들어, 콘텐츠 너비가 200px이고 안쪽 여백(padding) 크기가 40px, 그리고 테두리 굵기(border)가 10px인 실제 박스의 크기는 앞에 값을
  모두 더한 값인 250px이 된다.

• border-box는 콘텐츠에 지정된 너비인 200px에 안쪽 여백(padding)인 40px과 테두리 굵기(border)인 10px이 포함된다. 그렇게 되면 실제 박스의 크기는 250px이 아니라 200px이 된다.

box model

• margin 속성은 padding 속성과 달리 속성 값에 음수 값을 사용할 수 있다. 그리고 margin-[방향]의 상세 속성을 이용하여 방향별로 지정할 수도 있으며, 이때는 하나의 속성 값만 사용할 수 있다.margin의 특성 중에 상하로 인접한 박스의 display 속성 값이 "block"인 경우, 마진 겹침(Margin Collapsing) 현상이 발생한다.
  margin-bottom 속성 값이 “10px”이고, B 요소의 margin-top 속성 값이 20px”일 때 두 요소 사이의 margin은 20px로 적용된다.

flex model

• flexboxs는 주축과 교차축이라는 두 개의 축이 존재한다. 주축은 flex-direction 속성을 사용하여 지정하며 교차축은 이에 수직인 축으로 결정된다. flex-direction의 속성은 row , row-reverse, column, column-reverse로 나뉜다.row , row-reverse는 인라인 방향을 따르고 column, column-reverse은 블록 방향을 따른다. flexbox는 주축, 교차축을 따라 항목을 정렬하고 끝을 맞추는 각종 속성들을 적용하는 방식으로 동작한다. flex 컨테이너를 생성하려면 영역 내의 컨테이너 요소의 display 값을 flex 혹은 inline-flex로 지정한다. flex 항목들은 각 항목 별 내부 요소의 크기로 주축을 따라 정렬된다. flex 요소의 정렬 방향은 “왼쪽, 오른쪽, 위, 아래”를 사용하지 않고 시작선 , 끝선을 사용한다. flex-direction: row-reverse 라고 지정하면 행으로 나열되는 것은 그대로지만 시작 선과 끝 선이 서로 바뀌게 된다. flexbox는 1차원 모델이지만 flex 항목이 여러 행에 나열되도록 할 수 있다. 그 경우 각 행이 새로운 flex 컨테이너라고 생각해야 한다. 공간 배분은 해당 행에서만 이루어지며 다른 행은 영향을 받지 않는다. 항목이 여러 행에 나열되도록 하려면 flex-wrap 속성의 값을 wrap으로 지정해야한다.

• 그림으로 배우는 flex model, 게임으로 배우는 flex model, 이론 참고 사이트